// 初始化插件
var config = {
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 200,		//点个数
    color: "#c1c1c1", 	//点颜色
    stroke: "#d9d9d9", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
}

  //调用
  CanvasParticle(config);

// 价格模拟服务器的数据
  let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

let dataHtml = ''
let footList = document.querySelector('.foot-list')

data.forEach(function(v,i){
    dataHtml += `
    <li class="${i === 0 ? 'active' : ''}" data-price = ${v.price} data-unit-price = ${v.unitPrice}>
    ${v.count}次
    </li>
    `
})

footList.innerHTML += dataHtml
let footP = document.querySelector('.foot-p')
// 点击footList 筛选出符合要求的li
footList.addEventListener('click',function(e){
  // console.log(e.target.nodeName);
  if(e.target.nodeName == 'LI'){

    for(i=0;i<footList.children.length;i++){
      footList.children[i].classList.remove('active')
    }
    e.target.classList.add('active')

    footP.innerHTML = `<span>￥${e.target.dataset.price}</span>&nbsp;约(${e.target.dataset.unitPrice}/次),仅限企业实名购买`
  }
})

/* footList.addEventListener('click',function(e){
    // console.log(e.target.nodeName);
    // 点击button的时候获取激活样式并清除上一个的样式
    let bool = e.target.nodeName === 'LI' && e.target.className != 'xianshi'
    // console.log(bool);
    if(bool){

        for(i = 1; i < footList.children.length; i++){
          footList.children[i].className = ''
        }
        e.target.className = 'active'

        // 总价
        footP.innerHTML = `<span>￥${e.target.dataset.price}</span>&nbsp;约(${e.target.dataset.unitPrice}/次),仅限企业实名购买`
    }

})
 */

// 选项卡

let li = document.querySelectorAll('.main-list li')
// console.log(li);
let liP = document.querySelectorAll('.li')
// console.log(liP[2]);
// console.log(liP);
let index = 0
li.forEach(function(v,i){
  v.addEventListener('click',function(){
    // 先干掉上一个的样式
    li[index].classList.remove('active1')
    liP[index].classList.remove('on')
    // 在给当前添加样式
    v.classList.add('active1')
    liP[i].classList.add('on') 
    index = i
  })
})